window.addEventListener('load', function () {
  var li = this.document.querySelector('.guding').querySelectorAll('li')

  for (let i = 0; i < li.length; i++) {
    //   遍历li数组
    li[i].addEventListener('click', function () {
        // 初始化li的style样式
      for (let j = 0; j < li.length; j++) {
        li[j].style.color = '#666'
        li[j].style.backgroundColor = '#fff'
      }
    //   点击后li的样式
      this.style.backgroundColor = '#c81623'
      this.style.color = '#fff'
    //   获取到去往位置的top值
      let top1Top = document.querySelector('.box_dianqi_nav').offsetTop
      let top2Top = document.querySelector('.top2').offsetTop
      let top3Top = document.querySelector('.top3').offsetTop
    //   添加指定的属性，并为其赋指定的值
      li[i].setAttribute('index', i)
    //   添加指定的属性，并为其赋指定的值
      var index = this.getAttribute('index')
    //  实现动画
      index == 0 ? animate(window ,top1Top-5) :false
      index == 1 ? animate(window,top2Top) : false
      index == 2 ? animate(window,top3Top - 10) : false
      
    })
  }

  // 回到顶部
  let dingbu = this.document.querySelector('.dingbu')
  window.addEventListener('scroll', function () {
    //   滑动事件当窗口不在某个位置时候显示回到顶部的按钮 这个位置可以直接改 我这里写的是0
    window.pageYOffset != 0 ? (dingbu.style.display = 'block') : (dingbu.style.display = 'none')
  })
  dingbu.addEventListener('click', function () {
    //   点击事件点击回到顶部
    animate(window, 0)
  })
})
